<!DOCTYPE html>
<html>
    <head>
        <meta charset="uf-8">
        <title>demo091011</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <img class="img1" src="img/Background01.png" alt="背景1">
            <div class="txt1">
                <p class="t1">Hello World</p>
                <p class="t2">China is speeding up strategic plan, standards, traffic rules, laws and regulations<br>
                     on accident-incurred liabilities for its smart car industry, Economic Information<br> 
                     Daily reported Thursday.</p>
            </div>
            <div class="box1">
                <p class="t3">CREATE YOUR ACCOUNT</p>
                <P class="t4">IT IS ABSOLUTELY FREE</P>
                <form class="form1">
                    <input type="text" class="input1" placeholder="DENG3@ife.com">
                    <input type="password" class="input1" placeholder="Create your password">
                    <button type="button" class="button1">SIGN UP</button>
                </form>
            </div>
        </header>
        <div class=".first">
                <div class="box2">
                    <p class="t5">BOATLOADS OF AWESOME</p>
                    <p class="t6">Ready-made, customizable, HTML<br> landing page sections</p>
                </div> 
                <div class="div1">
                    <div class="box3">
                        <img  img class="img2" src="img/Iphone.png" alt="小图标">
                        <h3 class="h31">&nbsp;&nbsp;&nbsp;Mobile First</h3>
                        <p class="t7">&nbsp;&nbsp;&nbsp;All modulz are built mobile-first for maximum<br>&nbsp;&nbsp;&nbsp;device compatibil</p>
                    </div>
                    <div class="box3">
                        <img  img class="img2" src="img/Check.png" alt="小图标">
                        <h3 class="h31">&nbsp;Accessibility</h3>
                        <p class="t7">&nbsp;Support for IE8, mobile and tablet devices,<br>&nbsp;screenreaders and color blind.</p>
                    </div>
                    <div class="box3">
                            <img  img class="img2" src="img/Pencil.png" alt="小图标">
                            <h3 class="h31">Fluid Typography</h3>
                            <p class="t7">On different screen sizes, fonts automagically<br>scale with the viewport.</p>
                    </div>
                    <div class="box3">
                            <img  img class="img2" src="img/Settings.png" alt="小图标">
                            <h3 class="h31">Customization</h3>
                            <p class="t7">Make any design your own using the Style<br>Editor. Personalize fonts,color,and layouts to<br>create the custom look you want.</p>
                    </div>
                </div>
        </div>
        <div class=".second">
                <img class="img1" src="img/Background02.png" alt="背景2">
                <div class="box4">
                    <h3 class="h32">Supportive policies<br>for China's smart<br>car</h3>
                    <p class="t8">China will come up with its own smart car<br>standards, traffic rules, laws and regulations<br>relating to safety, according to the China<br>Industry Innovation Alliance for the Intelli-<br>gent and Connected Vehicles.</p>
                    <button class="button2">Check out Features</button>
                    <button class="button3">Try product for Free</button>
                </div>
                <div class="box5">
                    <div class="circle"></div>
                    <img class="img3" src="img/Screen.png" alt="插图1">
                </div>
        </div>
        <div class="third">
            <div class="box6">
                <h3 class="h33">Try Our Awesome Products</h2>
                <div class="part1">
                    <img class="img4" src="img/Singleton.png" alt="插图1">
                    <p class="t9">Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architecture and standards for test grounds.</p>
                </div>
                <div class="part1">
                    <img class="img4" src="img/Hero.png" alt="插图2">
                    <p class="t9">Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan ($158.15 billion) and also able to boost fast development in 5G, internet of cars, big data, artificial intelligence and new-energy vehicles.</p>
                </div>
                    <div class="part1">
                        <img class="img4" src="img/Portland.png" alt="插图3">
                        <p class="t9">Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.</p>
                    </div>
            </div>
            <hr stlyle="color:#b7b3b0">
            <div class="fourth">
                <img class="img5" src="img/图层-3.png" alt="左">
                <h3 class="h34">Learn How to Improve Your Personal Business</h3>
                <p class="t10">Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architecture and standards for test grounds.</p>
                <img class="img6" src="img/图层-2.png" alt="左">
                <h3 class="h35">Choose Between Two Beautifully Designed Color Schemes.</h3>
                <p class="t11">China will come up with its own smart car standards, traffic rules, laws and regulations relating to safety, according to the China Industry Innovation Alliance for the Intelligent and Connected Vehicles.</p>
            </div>
            <hr class="hr1">
            <div class="fifth">
                <h3 class="h33">Our Awesome Crew</h3>
                <p class="t12">Our unique online teaching style makes learning easy for everyone. Whether you<br>are trying to land a new job, brush up on your skills.</p>
                <div class="box7">
                    <img class="img7" src="img/1.png" alt="左">
                    <div class="box7-1">
                        <p class="p1">Ethan Dutton</p>
                        <p class="p2">SENIOR VISUAL DESIGNER</p>
                        <div class = "part2"><img class="img8" src="img/Facebook-Icon.png" alt="左"></div>
                        <div class = "part3"><img class="img8" src="img/Circle-Icon.png" alt="左"></div>
                        <div class = "part3"><img class="img8" src="img/Instagram-Icon.png" alt="左"></div>
                    </div>
                </div>
                <div class="box8">
                    <img class="img7" src="img/2.png" alt="左">
                    <div class="box7-1">
                            <p class="p1">Ethan Dutton</p>
                            <p class="p2">SENIOR VISUAL DESIGNER</p>
                            <div class = "part2"><img class="img8" src="img/Facebook-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Circle-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Instagram-Icon.png" alt="左"></div>
                    </div>
                </div>
                <div class="box7">
                    <img class="img7" src="img/3.png" alt="左">
                    <div class="box7-1">
                            <p class="p1">Ethan Dutton</p>
                            <p class="p2">SENIOR VISUAL DESIGNER</p>
                            <div class = "part2"><img class="img8" src="img/Facebook-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Circle-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Instagram-Icon.png" alt="左"></div>
                    </div>
                </div>
                <div class="box8">
                    <img class="img7" src="img/4.png" alt="左">
                    <div class="box7-1">
                            <p class="p1">Ethan Dutton</p>
                            <p class="p2">SENIOR VISUAL DESIGNER</p>
                            <div class = "part2"><img class="img8" src="img/Facebook-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Circle-Icon.png" alt="左"></div>
                            <div class = "part3"><img class="img8" src="img/Instagram-Icon.png" alt="左"></div>
                    </div>
                </div>
            </div>
            <hr class="hr2">
            <div class="sixth">
                    <form class="form2">
                            <p class="t13">FELL FREE TO WRITE US</p>
                            <input type="text" name="email" class="input2" placeholder="E-mail">
                            <input type="text" name="subject" class="input2" placeholder="Subject">
                            <input type="text" name="message" class="input3" placeholder=" Message"></textarea>
                            <buttom class="button4">SEND</buttom>
                    </form>
                    <div class="box9">
                            <h2 class="h2">Contact</h2>
                            <p class="t14">Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to create the custom look you want.</p>
                            <div class="line">
                                <img class="img8" src="img/Map-Icon.png">
                                <p class="p3">360 King Street<br>
                                    Feastrvale Trevose. PA 19057</p>
                            </div>
                            <div class="line">
                                <img class="img8" src="img/Phone.png">
                                <p class="p3">(755) 564-84-12</p>
                            </div>
                            <div class="line">
                                <img class="img8" src="img/Mail-Icon.png">
                                <p class="p3">youname@333.com</p>
                            </div>
            
                        </div>
            
            </div>
        </div>
        <footer>
                <div class="footer">
                        <div class="container">
                            <div class="list">
                               <span class="span1">Learn More</span>
                                <a href="#"><span class="span2">How it works?</span></a>
                                <a href="#"><span class="span2">Meeting tools</span></a>
                                <a href="#"><span class="span2">Live streaming</span></a>
                                <a href="#"><span class="span2">Contact method</span></a>
                            </div>
                            <div class="list">
                                <span class="span1">About us</span>
                                <a href="#"><span class="span2">About us</span></a>
                                <a href="#"><span class="span2">Features</span></a>
                                <a href="#"><span class="span2">Privacy police</span></a>
                                <a href="#"><span class="span2">Terms & Conditions</span></a>
                            </div>
                            <div class="list">
                                <span class="span1">Support</span>
                                <a href="#"><span class="span2">F.A.Q.</span></a>
                                <a href="#"><span class="span2">Contact us</span></a>
                                <a href="#"><span class="span2">Live chat</span></a>
                                <a href="#"><span class="span2">Phone call</span></a>
                            </div>
                            <div class="list2">
                                <span class="span1">Enjoy your life</span>
                                <div class="box10">Great web UI kit for designers, freelancers or business.</div>
                                <div class="logo">
                                    <a href="#" class="logo-0" title="Twitter Icon"><img class="img9" src="img/Twitter.png"></a>
                                    <a href="#" class="logo-0" title="Facebook Icon"><img class="img9" src="img/Facebook.png"></a>
                                    <a href="#" class="logo-0" title="Google Icon"><img class="img9" src="img/Google.png"></a>
                                    <a href="#" class="logo-0" title="Tumbler Icon"><img class="img9" class="img9" src="img/Tumbler.png"></a>
                                    <a href="#" class="logo-0" title="Pinterest Icon"><img class="img9" src="img/Pinterest.png"></a>
                                    <a href="#" class="logo-0" title="LinkedIn Icon"><img class="img9" src="img/LinkedIn.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                
        </footer>
    </body>
</html>
